<template>
    <div class="page">
        <div class="page-content" v-if="order.orderId">
            <div class="list">
                <item>
                    借款金额
                    <span class="item-note">￥{{order.borrowAmt}}</span>
                </item>
                <item>
                    借款期限
                    <span class="item-note">{{order.days}}天</span>
                </item>
                <item>
                    借款日期
                    <span class="item-note">{{order.orderDate}}</span>
                </item>
                <item>
                    预期还款日期
                    <span class="item-note">{{order.repayDate}}</span>
                </item>
                <item>
                    借款利息
                    <span class="item-note">{{order.interest}}</span>
                </item>
                <item>
                    优惠券使用
                    <span class="item-note">{{order.redId||order.couponId?'已使用':'未使用'}}</span>
                </item>
                <item>
                    逾期金额
                    <span class="item-note">￥{{order.expireAmt||0|fixedFilt}}</span>
                </item>
                <item>
                    未还款本金
                    <span class="item-note">￥{{order.surplusBorrowAmt}}</span>
                </item>
                <item>
                    未还款逾期
                    <span class="item-note">￥{{order.surplusExpireAmt||0}}</span>
                </item>
            </div>
            <div class="submit">
                <p>应还款金额：
                    <span>{{order.surplusRepayAmt}}元</span>
                </p>
                <md-button class="button button-balanced button-block" @click.native="confirmBankDo">
                    我要还款
                </md-button>
            </div>
    
            <b-popup :show='confirmBankShow'>
                <div class="confirmBank">
                    <div class="close" @click="cancaelRepayDo">
                        <img src="/static/img/cancel@3x.png">
                    </div>
                    <p class="hint">请确保您的银行卡余额充足，扣款失败将严重影响您的信用</p>
                    <p class="money">还款总额：
                        <span>{{order.surplusRepayAmt}}元</span>
                    </p>
                    <p class="bank">还款银行卡：{{order.bankName}}（尾号{{order.bankCard.slice(-4)}}）</p>
                    <div class="ok_btn">
                        <md-button class="button button-balanced" @click.native="repayDo">确认</md-button>
                    </div>
                </div>
            </b-popup>
    
            <b-popup :show="alertBankshow">
                <div class="alertBank">
                    <img src="/static/img/apply_for@3x.png" alt="">
                    <p>还款申请已提交，完成后系统将自动扣款，并将扣款信息短信通知。</p>
                    <div class="ok_btn">
                        <md-button class="button button-balanced" @click.native="repaySuccessDo">确认</md-button>
                    </div>
                </div>
            </b-popup>
    
        </div>
    </div>
</template>
<script src="./Repay.js"></script>
<style lang="scss" scoped src="./Repay.scss"></style>